<template>
	<view class="box">

		<view class="tap_name">
			<image src="../../static/logo.png" mode="" class="top_image"></image>
			<view class="">
				名称家政
			</view>
		</view>
		<view class="fff"></view>
		<view class="example">
			<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData" class="form">
				<uni-forms-item name="phone">
					<input v-model="customFormData.phone" placeholder="请输入手机号" class="input" />
				</uni-forms-item>
				<uni-forms-item name="captcha">
					<view class="input-btn">
						<input v-model='customFormData.captcha' class="input" placeholder="请输入验证码" />
						<view class="checking" @click="checking" v-if="state===false">获取验证码</view>
						<view class="checking time" v-if="state===true">倒计时{{ currentTime }}s</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="password">
					<input v-model="customFormData.password" placeholder="请输入密码" class="input" type="password" />
				</uni-forms-item>

			</uni-forms>
			<navigator url="/pages/Login/Login" hover-class="navigator-hover">
				<view class="label">已有帐号，立即登录</view>
			</navigator>
			<button @click="submit('customForm')" class="btn">提交</button>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: false, //是否开启倒计时
				totalTime: 60, //总时间，单位秒
				recordingTime: 0, //记录时间变量
				currentTime: 0, //显示时间变量
				// 表单数据
				customFormData: {
					phone: '',
					password: '',
					captcha: ''
				},
				customRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码'
						}, {
							pattern: /^[1]([3-9])[0-9]{9}$/,
							errorMessage: '手机号不合法！'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
							minLength: 6,
							maxLength: 12,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'

						}, {
							pattern: /^[0-9]{6}/,
							errorMessage: '请输入6位密码'
						}]
					},
					captcha: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}, {
							pattern: /^[0-9]{6}/,
							errorMessage: '请输入6位验证码'
						}]
					}


				}
			}
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			submit(ref) {
				console.log("发送验证码");
				let that = this
				this.$refs[ref].validate().then(aaa => {
					console.log('success', aaa);
					uni.request({
						url: 'http://192.168.43.108:3000/cxj/register',
						data: this.customFormData,
						method: "POST",
						success: (info) => {
							console.log(info, "：info");
							const code = JSON.parse(uni.getStorageSync('code')) || {};
							console.log(code, 151515);
							if (info.data.code == 200) {
								console.log(111);
								if (code.captcha == aaa.captcha && code.phone == aaa.phone) {
									console.log('注册成功');
									uni.showToast({
										title: `注册成功`,
									})

									uni.navigateTo({
										url: '/pages/Login/Login'
									});
								} else {
									uni.showToast({
										title: "验证码不正确",
										icon: "error"
									})
								}
							} else {
								uni.showToast({
									icon: "error",
									title: info.data.msg
								})
							}
						}
					});
					// uni.showToast({
					// 	title: `登录成功`
					// })
				}).catch(err => {
					console.log('err', err);
				})
			},
			checking() {
				//把显示时间设为总时间
				this.currentTime = this.totalTime;
				//开始倒计时
				this.state = true;
				//执行倒计时
				this.checkingTime();
				uni.request({
					url: 'http://192.168.1.48:3000/cxj/phoneCode',
					data: this.customFormData,
					method: "POST",
					success: (res) => {
						console.log(res.data, "11111");
						if (res.data.code == 200) {
							uni.showToast({
								title: "验证码已发送"
							})
							uni.setStorageSync('code', JSON.stringify(res.data));

						} else {
							uni.showToast({
								icon: "error",
								title: res.data.msg
							})
						}
					}
				});
			},
			checkingTime() {
				let that = this;
				//判断是否开启
				if (this.state) {
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => {
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime();
						}, 1000)
					} else {
						//时间已完成，还原相关变量
						this.state = false; //关闭倒计时
						this.recordingTime = 0; //记录时间为0
						this.currentTime = this.totalTime; //显示时间为总时间
					}
				} else {
					//倒计时未开启，初始化默认变量
					this.state = false;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			}
		},


	}
</script>

<style lang="scss">
	.box {
		padding: 0 100rpx;
		height: 100vh;
		background-image: url("../../static/head.png");
	}

	.top_image {
		width: 20%;
		height: 150rpx;
		border-radius: 50%;
	}

	.checking {
		position: absolute;
		right: 0;
		top: 0;
		background: rgb(62, 211, 45);
		color: #fff;
		border: 0;
		border-radius: 110rpx;
		font-size: 30rpx;
		margin-left: auto;
		margin-right: auto;
		padding-left: 16rpx;
		padding-right: 16rpx;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 2.55555556;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		padding-top: 2rpx;
		padding-bottom: 2rpx;
		margin-top: 25rpx;
	}

	.checking.time {
		background: #a7b6d0;
	}

	.fff {
		width: 100%;
		height: 900rpx;
		background-color: #fff;
		opacity: 0.9;
	}

	.example {
		position: absolute;
		top: 24%;

	}

	.tap_name {
		display: flex;
		padding: 80rpx 0rpx;
		margin-left: 30%;
		line-height: 150rpx;
	}

	.title {
		position: absolute;
		top: 0;
		margin-top: 50rpx;
		line-height: 360rpx;
		font-size: 68rpx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100rpx;
	}



	.form {
		width: 80%;
		// margin-top: 150rpx;
	}

	.input {
		background: #e2f5fc;
		margin-top: 25rpx;
		margin-left: 20rpx;
		border-radius: 100rpx;
		padding: 20rpx 10rpx;
		font-size: 36rpx;
	}

	.input-placeholder,
	.input {
		color: #94afce;
	}

	.label {

		padding: 5rpx 0;
		text-align: right;
		font-size: 26rpx;
		color: #a7b6d0;
	}


	.btn {
		background-color: rgb(62, 211, 45);
		color: #fff;
		border: 0;
		border-radius: 100rpx;
		width: 80%;
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}

	.btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1rpx, 1rpx);
	}

	.bottom {
		padding: 30rpx 0rpx;

		.text {
			padding: 20rpx 0rpx;
			text-align: center;
			color: #7f7f7f;
		}

		.icon {
			padding: 20rpx 0rpx;
			width: 400rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-around;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}
		}

		.mainmsg {
			padding: 20rpx 0rpx;

			.kefu {
				font-size: 26rpx;
				text-align: center;
				color: #7f7f7f;
			}

			.rexian {
				font-size: 26rpx;
				text-align: center;
				color: #7f7f7f;
			}

			.jvbao {
				font-size: 26rpx;
				text-align: center;
				color: #7f7f7f;
			}

			.fuwu {
				font-size: 26rpx;
				text-align: center;
				color: #7f7f7f;
			}

			.hao {
				font-size: 26rpx;
				text-align: center;
				color: #7f7f7f;
			}
		}
	}

	.verity-wrap {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		left: 0px;
		right: 0px;
		bottom: 0px;
		top: 0px;

		.verity-box {
			width: 320px;
			min-height: 200px;
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translateX(-50%);

			.verity-content {
				border: 2px solid #fff;
				width: 100%;
				height: 200px;
				background-color: #ffffff;
				position: relative;

				.verity-bg {
					width: 100%;
					height: 100%;
					display: block;
					opacity: 0.5;
				}

				.fl {
					position: absolute;
					font-size: 18px;
					color: #ff0000;
					cursor: pointer;

					.fl-box {
						position: relative;

						.fl-value {
							display: inline-block;
						}

						.fl-count {
							position: absolute;
							top: -10px;
							left: 25px;
							color: #ff0000;
							font-size: 14px;
						}
					}
				}

				.verity-select {
					background-color: #d1c09d;
					border-radius: 50%;
					width: 30px;
					height: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
				}

				.verity-freshbtn {
					width: 20px;
					height: 20px;
					position: absolute;
					top: 7px;
					right: 50px;
					z-index: 5;
					transition: all 1s ease;
				}

				.verity-freshtxt {
					color: #333;
					font-size: 16px;
					position: absolute;
					top: 6px;
					right: 9px;
					z-index: 5;
				}

				.refresh-box {
					width: 60px;
					height: 20px;
					position: absolute;
					right: 9px;
					top: 7px;
					z-index: 6;
				}
			}

			.verity-footer {
				width: 100%;
				height: 50px;
				background-color: #d1c09d;
				font-weight: 500;
				color: #ffffff;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10px;

				.verity-footer-code {
					font-weight: bold;
					padding-left: 5px;
				}
			}
		}
	}
</style>